<html>
<head>
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.common.effects.js" ></script>
    <script src="../libraries/RGraph.drawing.poly.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A dual color clickable filled range Line chart</title>
    
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A range Line chart which shows two colors - the threshold of which is settable" />
     
</head>
<body>

    <h1>A dual color clickable filled range Line chart</h1>
    
    <p>
        By using the Poly drawing API object with a filled range chart you can make the filled range clickable.
    </p>

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>


    <script>
        $(document).ready(function ()
        {
            var line = new RGraph.Line({
                id: 'cvs',
                data: [
                       [3,4,6,5,2,4,5,5,6,8,7,4,8,9,8,6,5,2,5,4],
                       [12,13,15,16,12,13,15,14,21,22,20,13,15,16,18,19,16,15,13,18]
                      ],
                options: {
                    filled: {
                        self: true,
                        range: true
                    },
                    fillstyle: 'red',
                    colors: ['black'],
                    linewidth: 1,
                    numxticks: 19,
                    ymax: 50,
                    tickmarks: null,
                    background: {
                        grid: {
                            autofit: {
                                numvlines: 19
                            }
                        }
                    }
                }
            }).trace(null, drawPoly);


            function drawPoly ()
            {
                /**
                * Extract the coords from the Line chart coords
                */
                var coords = [];
                for (var i=0; i<(line.coords.length / 2); i+=1) {
                    coords.push(line.coords[i]);
                }

                for (var i=(line.coords.length - 1); i>=(line.coords.length / 2);i-=1) {
                    coords.push(line.coords[i]);
                }

                var poly = new RGraph.Drawing.Poly({
                    id: 'cvs',
                    coords: coords,
                    options: {
                        strokestyle: 'rgba(0,0,0,0)',
                        fillstyle: 'rgba(0,0,0,0)',
                        tooltips: ['The tooltip!'],
                        highlight: {
                            fill: 'rgba(255,255,255,0.5)'
                        }
                    }
                }).draw()
            }
        })
    </script>

    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>

